import { postMyImport } from "@/apis/endpoint/my";
import { fileUpload } from "@/apis/upload";
import GpContainer from "@/components/GpContainer";
import { GpDot } from "@/components/GpDot";
import { GpTouchableView } from "@/components/GpTouchableView";
import { navigate } from "@/utils/navigation";
import { Image, Swiper, SwiperItem, View } from "@tarojs/components";
import { useRef, useState } from "react";
import Taro from "@tarojs/taro";

export default function Index() {
  const maxSize = 20
  const [current, setCurrent] = useState(0)
  const steps = useRef([
    { value: require("./images/resume-upload-step1.png"), label: "1.将简历发送至微信" },
    { value: require("./images/resume-upload-step2.png"), label: "2.点击本页面底部【立即上传】按钮" },
    { value: require("./images/resume-upload-step3.png"), label: "3.选择已发送简历的聊天对象" },
    { value: require("./images/resume-upload-step4.png"), label: "4.选择简历文件，点击【确定】即可上传" },
    { value: require("./images/resume-upload-step5.png"), label: "5.完成上传" },
  ])
  async function handleImportResume() {
    const { tempFiles: [tempFile] } = await Taro.chooseMessageFile({
      count: 1,
      type: "all"
    })
    const { path, name, size, type } = tempFile
    const sizeExtend = size > maxSize * 1024 * 1024
    if (type === "image") {
      if (sizeExtend) {
        showLimitTip(`文件大小 ${(size / 1024 / 1024).toFixed(2)}MB 超出限制（最大 ${maxSize}MB）`)
        return
      }
      await upload()
      navigate()
    } else if (type === "file") {
      const ext = name.split('.').pop();
      const allowedExts = ["PDF", "pdf"]
      if (ext && !allowedExts.includes(ext)) {
        showLimitTip("不支持该文件类型")
        return
      }
      if (sizeExtend) {
        showLimitTip(`文件大小 ${(size / 1024 / 1024).toFixed(2)}MB 超出限制（最大 ${maxSize}MB）`)
        return
      }
      await upload()
      navigate()
    } else {
      showLimitTip("不支持该文件类型")
    }
    async function upload() {
      const { fullName } = await fileUpload(path)
      await postMyImport(JSON.stringify(fullName)).send({ loadingText: '上传中...' })
      Taro.showToast({
        title: "上传成功",
        icon: "none"
      })
    }
    function showLimitTip(content: string) {
      Taro.showModal({
        title: "提示",
        content
      })
    }
  }
  return (
    <GpContainer className="bg-white px-[32px]">
      <View className="mt-[16px]">
        <View className="text-primary text-[48px] !leading-[48px] font-bold">
          上传附件简历
        </View>
        <View className="text-third text-[28px] !leading-[36px] mt-[28px]">
          建议使用PDF文件，也支持JPG、PNG格式，大小不得超过{maxSize}M
        </View>
      </View>
      <View className="mt-[64px]">
        <View className="text-primary text-[32px] !leading-[32px] font-medium">
          {steps.current[current].label}
        </View>
        <Swiper
          className="w-full h-[720px] mt-[40px]"
          current={current}
          onChange={({detail: {current}}) => {
            setCurrent(current)
          }}
        >
            {
              steps.current.map((item, index) => (
                <SwiperItem key={index} style={{width: "100%", height: "100%"}}>
                  <Image src={item.value} className="w-full h-full object-cover block" />
                </SwiperItem>
              ))
            }
        </Swiper>
        <View className="flex flex-row items-center justify-center gap-[12px] mt-[32px]">
          {
            steps.current.map((_, index) => (
              <GpDot size={16} key={index} className={index === current ? "bg-theme" : "bg-theme/20"} />
            ))
          }
        </View>
        <GpTouchableView onClick={handleImportResume} className="flex flex-row justify-center items-center box-border bg-theme rounded-[64px] h-[80px] w-full text-white text-[32px] mt-[108px] mb-[32px]">
          立即上传
        </GpTouchableView>
      </View>
    </GpContainer>
  )
}
